<template>
  <view class="container">
    <!-- 日期格式选择按钮 -->
    <view class="format-buttons">
      <button
        class="format-btn"
        :class="{ active: selectedFormat === 'date' }"
        @click="selectedFormat = 'date'"
      >
        年月日
      </button>
      <button
        class="format-btn"
        :class="{ active: selectedFormat === 'month' }"
        @click="selectedFormat = 'month'"
      >
        年月
      </button>
      <button
        class="format-btn"
        :class="{ active: selectedFormat === 'year' }"
        @click="selectedFormat = 'year'"
      >
        年
      </button>
    </view>

    <!-- 日期选择输入框 -->
    <view class="date-input-container">
      <input
        class="date-input"
        type="text"
        placeholder="选择开始日期"
        @click="openDatePicker('startDate')"
        readonly
        :value="startDate"
      />
      <text class="date-separator">至</text>
      <input
        class="date-input"
        type="text"
        placeholder="选择结束日期"
        @click="openDatePicker('endDate')"
        readonly
        :value="endDate"
      />
    </view>

    <!-- 日期选择器 -->
    <view v-if="showDatePicker" class="date-picker-overlay">
      <view class="date-picker">
        <view class="picker-header">
          <button class="picker-btn" @click="closeDatePicker">取消</button>
          <button class="picker-btn" @click="confirmDate">完成</button>
        </view>
        <view class="picker-body">
          <picker-view
            class="picker-view"
            :value="pickerValue"
            @change="handlePickerChange"
          >
            <picker-view-column>
              <view
                class="picker-item"
                v-for="(item, index) in years"
                :key="index"
              >
                {{ item }}年
              </view>
            </picker-view-column>
            <picker-view-column v-if="selectedFormat !== 'year'">
              <view
                class="picker-item"
                v-for="(item, index) in months"
                :key="index"
              >
                {{ item }}月
              </view>
            </picker-view-column>
            <picker-view-column
              v-if="selectedFormat === 'date'"
            >
              <view
                class="picker-item"
                v-for="(item, index) in days"
                :key="index"
              >
                {{ item }}日
              </view>
            </picker-view-column>
          </picker-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const selectedFormat = ref('date');
const startDate = ref('2023-01-01');
const endDate = ref('2024-01-01');
const showDatePicker = ref(false);
const currentInput = ref<string>('');
const pickerValue = ref([0, 0, 0]);
const startYear = ref(2000);
const endYear = ref(2030);

const years = computed(() => {
  const yearArray = [];
  for (let i = startYear.value; i <= endYear.value; i++) {
    yearArray.push(i);
  }
  return yearArray;
});

const months = computed(() => {
  const monthArray = [];
  for (let i = 1; i <= 12; i++) {
    monthArray.push(i);
  }
  return monthArray;
});

const days = computed(() => {
  const dayArray = [];
  for (let i = 1; i <= 31; i++) {
    dayArray.push(i);
  }
  return dayArray;
});

const openDatePicker = (inputName: string) => {
  currentInput.value = inputName;
  const [y, m, d] = parseDate(inputName === 'startDate' ? startDate.value : endDate.value);
  pickerValue.value = [y, m, d];
  showDatePicker.value = true;
};

const closeDatePicker = () => {
  showDatePicker.value = false;
};

const confirmDate = () => {
  const [year, month, day] = pickerValue.value;
  const selectedDate = formatDate(year, month, day);
  if (currentInput.value === 'startDate') {
    startDate.value = selectedDate;
  } else if (currentInput.value === 'endDate') {
    endDate.value = selectedDate;
  }
  closeDatePicker();
};

const handlePickerChange = (e: any) => {
  pickerValue.value = e.detail.value;
};

const parseDate = (dateString: string) => {
  if (!dateString) return [0, 0, 0];
  const parts = dateString.split('-');
  const year = parseInt(parts[0]) - startYear.value;
  const month = parseInt(parts[1]) - 1;
  const day = parseInt(parts[2]) - 1;
  return [year, month, day];
};

const formatDate = (yearIndex: number, monthIndex: number, dayIndex: number) => {
  const year = startYear.value + yearIndex;
  const month = monthIndex + 1;
  const day = dayIndex + 1;
  return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.format-buttons {
  display: flex;
  margin-bottom: 20px;
}

.format-btn {
  flex: 1;
  padding: 10px;
  margin-right: 10px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.format-btn.active {
  background-color: #007aff;
  color: white;
}

.date-input-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.date-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-right: 10px;
}

.date-separator {
  margin: 0 10px;
}

.date-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 1000;
}

.date-picker {
  width: 100%;
  background-color: white;
  border-radius: 10px 10px 0 0;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid #eee;
}

.picker-btn {
  background: none;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.picker-btn:first-child {
  color: #999;
}

.picker-btn:last-child {
  color: #007aff;
}

.picker-body {
  padding: 20px;
  height: 200px;
}

.picker-view {
  height: 100%;
  display: flex;
  justify-content: center;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 5px;
}
</style>